import Taro, { Component } from '@tarojs/taro'
import { View, Block, Text } from '@tarojs/components'

// import { connect } from '@tarojs/redux'

// import { add, minus, asyncAdd } from '../../actions/counter'
import allRequest from './../../api/allRequest'
import './consumerMenu.less'
import allExtrance from '../../config/allExtrance';


// @connect(({ counter }) => ({
//   counter
// }), (dispatch) => ({
//   add () {
//     dispatch(add())
//   },
//   dec () {
//     dispatch(minus())
//   },
//   asyncAdd () {
//     dispatch(asyncAdd())
//   }
// }))
class Index extends Component {

    config = {
    }

    constructor() {
        super()
        this.state = {
            //默认排序数据
            condition: {
                key: 'sort',
                value: ['default'],
                data: [{
                    label: '默认排序',
                    value: 'default',
                    children: []
                }, {
                    label: '最新发布',
                    value: 'new',
                    children: []
                }, {
                    label: '离我最近',
                    value: 'distance',
                    children: []
                }]
            },
            tempValue: 'default',

            //职位数据
            postData: [],
            postDataSec: [],
            postCur: [0, 0],

            //地区数据
            areaData: [],
            areaDataSec: [],
            areaCur: [1, 1],

            //导航栏标题
            morenTitle: '默认排序',
            postTitle: '全部职位',
            areaTitle: '全惠州市',
            otherTitle: '其它筛选',
            //导航栏展示
            menuLayerShow: false,
            menuLayerShow0: false,
            menuLayerShow1: false,
            menuLayerShow2: false,
            menuLayerShow3: false,
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentDidMount() {
        //获取行业职位数据
        let industry
        let industryPromise
        if (Taro.getStorageSync('industry')) {
            industryPromise = new Promise((resolve) => {
                industry = JSON.parse(Taro.getStorageSync('industry'))
                resolve(true)
            })
        } else {
            industryPromise = new Promise((resolve) => {
                allRequest.industry()
                    .then(res => {
                        //缓存职位行业
                        allExtrance.util.Taro.setStorageSync('industry', JSON.stringify(res))
                        industry = res
                        resolve(true)
                    })
                    .catch(err => console.log(err));
            })

        }
        industryPromise.then(result => {
            if (result) {
                let industryTemp = {
                    industry_title: '全部职位',
                    industry_id: 0,
                    position: [{
                        position_title: '全部职位',
                        position_id: 0,
                        templates: [],
                    }]
                }
                industry.unshift(industryTemp)
                this.setState({
                    postData: industry,
                    postDataSec: industry[0].position
                })
            }
        })


        //获取地区数据
        let area
        let areaPromise
        if (Taro.getStorageSync('area')) {
            areaPromise = new Promise((resolve) => {
                area = JSON.parse(Taro.getStorageSync('area'))
                resolve(true)
            })
        } else {
            areaPromise = new Promise((resolve) => {
                allRequest.area()
                    .then(res => {
                        area = res
                        //缓存区域数据
                        allExtrance.util.Taro.setStorageSync('area', JSON.stringify(res))
                        resolve(true)
                    })
                    .catch(err => console.log(err));
            })

        }
        areaPromise.then(result => {
            if (result) {
                let tempSec = []
                let temp = []
                //effect_level   1省级代理 2市级代理 3区级代理
                if (area.effect_level == 2) {
                    temp = area.cities
                    tempSec.push(area.cities[0])
                    for (let i = 0; i < temp[0].areas.length; i++) {
                        tempSec.push(temp[0].areas[i])
                    }
                } else if (area.effect_level == 3) {
                    temp = area.cities[0].areas
                    tempSec.push(area.cities[0].areas[0])
                }
                this.setState({
                    areaData: temp,
                    areaDataSec: tempSec,
                    areaTitle: temp[0].name,
                    areaCur: [temp[0].code, temp[0].code],
                    effect_level: area.effect_level
                })
            }
        })

        //H5模式下隐藏离我最近筛选项
        if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
            let { condition } = this.state
            let temp = []
            for (let i = 0; i < condition.data.length; i++) {
                if (condition.data[i].value != "distance") {
                    temp.push(condition.data[i])
                }
            }
            condition.data = temp
            this.setState({
                condition
            })
        }
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }


    // 菜单标题点击
    menuTitleClick(index, e) {
        e.stopPropagation();
        //  三级代理暂不提供选择地区服务
        if (index == 2 && this.state.effect_level == 3) {
            return
        }
        if (this.props.type != 'search') {
            this.props.onheaderType('small')
        }
        let menuIndex = index
        this.setState({
            menuLayerShow0: false,
            menuLayerShow1: false,
            menuLayerShow2: false,
            menuLayerShow3: false,
        })
        if (menuIndex === this.state.menuIndex) {
            if (index == 3 && this.props.type != 'search') {
                this.props.onheaderType('big')
            }
            this.hideMenuLayer()
        } else {
            let temp = 'menuLayerShow' + menuIndex;

            this.setState({
                menuIndex,
                menuLayerShow: true,
                [temp]: true
            }, () => {

            })
        }
    }

    //地区菜单二级点击
    areaSub2Tap(item, e) {
        e.stopPropagation()
        let areaCur = this.state.areaCur
        areaCur[1] = item.code
        this.setState({
            areaCur
        })
        this.menuSelected('areaTitle', 'menuLayerShow2', item.name, { 'area_id': item.code })
    }


    // 职位菜单一级点击
    postSub1Tap(item, e) {
        e.stopPropagation()
        let postCur = this.state.postCur;
        postCur[0] = item.industry_id
        this.setState({
            postDataSec: item.position ? item.position : [],
            postCur,
        })
    }

    //职位菜单二级点击
    postSub2Tap(item, e) {
        e.stopPropagation()
        let postCur = this.state.postCur;
        postCur[1] = item.position_id
        this.setState({
            postCur,
        })
        this.menuSelected('postTitle', 'menuLayerShow0', item.position_title, { 'position_id': item.position_id })
    }

    // 默认排序菜单点击
    menuSub1Tap(item, e) {
        e.stopPropagation()
        let { value, label } = item
        let { condition, tempValue } = this.state
        this.setState({
            tempValue: value
        })
        this.menuSelected('morenTitle', 'menuLayerShow1', label, { 'order': value })
    }


    //菜单选择完毕
    menuSelected(value, hideMenu, label, menuquery) {
        this.setState({
            [value]: label,
            [hideMenu]: false,
            menuLayerShow: false,
            menuIndex: -1,
        }, () => {
            this.props.onDealRefresh(menuquery)
        })
    }

    // 隐藏菜单选择层
    hideMenuLayer(e) {

        this.setState({
            menuIndex: -1,
            menuItem: {},
            tempValue: [],
            menuLayerShow: false,
            menuLayerShow0: false,
            menuLayerShow1: false,
            menuLayerShow2: false,
            menuLayerShow3: false
        })
    }


    render() {
        let { morenTitle, postTitle, areaTitle, otherTitle, menuLayerShow, menuLayerShow0, menuLayerShow1, menuLayerShow2, menuLayerShow3,
            postData, postDataSec, postCur, areaData, areaDataSec, areaCur, condition, tempValue, effect_level } = this.state
        return (
            <View className='consumerMenu'>
                <View className='zhezhaoMenu' onClick={this.hideMenuLayer.bind(this)} style={`${menuLayerShow ? 'background:rgba(0, 0, 0, 0.6);min-height: 89vh' : ''}`}>
                    <View className='menu'>
                        {
                            effect_level != 3 && <View className={`item ${menuLayerShow2 ? 'current' : ''}`}
                                onClick={this.menuTitleClick.bind(this, 2)}>
                                <View className='text'>{areaTitle}</View>
                                {/* 区级代理暂不提供选择地区服务 */}
                                <View className='icon'></View>
                            </View>
                        }
                        <View className={`item ${menuLayerShow0 ? 'current' : ''} ${effect_level == 3 && 'onlyTwo'}`}
                            onClick={this.menuTitleClick.bind(this, 0)}>
                            <View className='text'>{postTitle}</View>
                            <View className='icon'></View>
                        </View>
                        <View className={`item ${menuLayerShow1 ? 'current' : ''} ${effect_level == 3 && 'onlyTwo'}`}
                            onClick={this.menuTitleClick.bind(this, 1)}>
                            <View className='text'>{morenTitle}</View>
                            <View className='icon'></View>
                        </View>
                        {/* <View className={`item ${menuLayerShow3 ? 'current' : ''} ${effect_level == 3 && 'onlyTwo'}`}
                            onClick={this.menuTitleClick.bind(this, 3)}>
                            <View className='text'>{otherTitle}</View>
                            <View className='icon'></View>
                        </View> */}
                    </View>
                    {
                        menuLayerShow1 && <Block>
                            <View className='menu-sub' style={`max-height:${Taro.getEnv() === Taro.ENV_TYPE.WEB ? '350px' : '400px'}`}>
                                <View className='menu-sub-1'>
                                    {
                                        condition.data.map((item, index) => <Block>
                                            <View className={`item ${item.value === tempValue && 'current'}`}
                                                onClick={this.menuSub1Tap.bind(this, item)}>
                                                <View className='xiabiao' style={`background-color:${Taro.getStorageSync('baseColor')}`}></View>
                                                <Text className='text'>{item.label}</Text>
                                            </View>
                                        </Block>)
                                    }
                                </View>
                            </View>
                        </Block>
                    }
                    {
                        menuLayerShow0 && postData.length > 0 && <Block>
                            <View className='menu-sub' style={`max-height:${Taro.getEnv() === Taro.ENV_TYPE.WEB ? '175px' : '450px'}`}>
                                <View className='menu-sub-1'>
                                    {
                                        postData.map((item, index) => <Block>
                                            <View className={`item ${item.industry_id === postCur[0] && 'current'}`}
                                                onClick={this.postSub1Tap.bind(this, item)}>
                                                <View className='xiabiao' style={`background-color:${Taro.getStorageSync('baseColor')}`}></View>
                                                <Text className='text'>{item.industry_title}</Text>
                                            </View>
                                        </Block>)
                                    }
                                </View>
                                {
                                    postDataSec.length > 0 && <View className='menu-sub-2'>
                                        {
                                            postDataSec.map((item, index) => <Block>
                                                <View className={`item ${item.position_id === postCur[1] && 'current'}`}
                                                    onClick={this.postSub2Tap.bind(this, item)}>
                                                    <Text className='text'>{item.position_title}</Text>
                                                </View>
                                            </Block>)
                                        }
                                    </View>
                                }
                            </View>
                        </Block>
                    }
                    {
                        menuLayerShow2 && areaData.length > 0 && <Block>
                            <View className='menu-sub' style={`max-height:${Taro.getEnv() === Taro.ENV_TYPE.WEB ? '175px' : '275px'}`}>
                                <View className='menu-sub-1'>
                                    {
                                        areaData.map((item, index) => <Block>
                                            <View className={`item ${item.code === areaCur[0] && 'current'}`}>
                                                <View className='xiabiao' style={`background-color:${Taro.getStorageSync('baseColor')}`}></View>
                                                <Text className='text'>{item.name}</Text>
                                            </View>
                                        </Block>)
                                    }
                                </View>
                                {
                                    areaDataSec.length > 0 && <View className='menu-sub-2'>
                                        {
                                            areaDataSec.map((item, index) => <Block>
                                                <View className={`item ${item.code === areaCur[1] && 'current'}`}
                                                    onClick={this.areaSub2Tap.bind(this, item)}>
                                                    <Text className='text'>{item.name}</Text>
                                                </View>
                                            </Block>)
                                        }
                                    </View>
                                }
                            </View>
                        </Block>
                    }
                    {
                        menuLayerShow3 && <Block>
                            <View className='menu-sub' style='height:400px;'>
                                <View className='filterBlock'>
                                    <View className='filterItem'>
                                        <View className='itemTitle'>工作性质</View>
                                        <View className='itemBlock'>
                                            <View className='itemTap current'>不限</View>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                        </View>
                                    </View>
                                    <View className='filterItem'>
                                        <View className='itemTitle'>薪资范围</View>
                                        <View className='itemBlock'>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                        </View>
                                    </View>
                                    <View className='filterItem'>
                                        <View className='itemTitle'>福利待遇（多选）</View>
                                        <View className='itemBlock'>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                            <View className='itemTap'>不限</View>
                                        </View>
                                    </View>

                                </View>
                                <View className='filterConfirm'>
                                    <View className='nav reset'>重置</View>
                                    <View className='nav confirm'>确定</View>
                                </View>
                            </View>
                        </Block>
                    }
                </View>

            </View>
        )
    }
}

export default Index
